<template>
   <div class="index">
     <div class="shop_home">
       <img :src="portalWebsiteData.websiteLogoUrl" v-if="portalWebsiteData.websiteLogoUrl"/>
       <img src="../../assets/img/noImg.png" v-else/>
       <div class="shop_name">
         <span style="font-size: 16px">{{portalWebsiteData.websiteName}}</span>
         <span v-if="portalWebsiteData.websiteRemark">{{portalWebsiteData.websiteRemark}}</span>
         <span v-else>暂无介绍</span>
       </div>
     </div>
     <div class="shop_home_body">
        <ul class="shop_home_ul">
          <li v-for="item in goodsAgentAccountSet.list" @click="goDetails_btn(item)">
            <img :src="item.goodsBigPic" v-if="item.goodsBigPic">
            <img src="../../assets/img/noImg.png" v-else>
            <p>{{item.goodsName}}</p>
            <span class="shop_red">￥<i>{{Public.formatMoney(item.goodsSalePrice,2)}}</i></span>
          </li>
        </ul>
     </div>
     <vue-footer></vue-footer>
   </div>
</template>
<script>
  import vueFooter from '../../components/footer/shopFooter.vue';
  import { Toast } from 'mint-ui'; //引入弹框
  export default {
    components: {
      vueFooter,
    },
    name: 'index',
    data(){
        return{
          //初始化页面数据
          goodsAgentAccountSet:{
              list:[],
          },
          //店铺信息
          portalWebsiteData:{},
        }
    },
    methods:{

      //页面列表初始化数据
      queryByPage(){
        this.axios({
          method: 'POST',
          url: "/v3/sale/goodss/queryGoodsToAgentAccountByPage",
          data: {
            "memberCode":localStorage.getItem("memberCode"),
          }
        }).then((res) => {
          this.goodsAgentAccountSet.list = res.data.list;
        }).catch((err) => {
          Toast({
            message: err.response.data,
            iconClass: 'fontSize iconfont icon-shibai'
          });
        });
      },

      //初始化店铺数据
      portal_website_queryDataByMemberCode(){
        this.axios({
          method: 'GET',
          url: "/v3/portal/websites/" + localStorage.getItem("memberCode") + "/queryDataByMemberCode",
          data: {},
        }).then((res) => {
          this.portalWebsiteData = res.data;
        }).catch((err)=>{
          Toast({
            message: err.response.data,
            iconClass: 'fontSize iconfont icon-shibai'
          });
        });
      },

      //（跳转）详情页
      goDetails_btn(item){
        localStorage.setItem("shopGoodsDetails",item.goodsCode);
        this.$router.push({path:"/shopGoodsDetails"})
      },

    },

    activated(){
      //初始化页面数据
      this.queryByPage();
      this.portal_website_queryDataByMemberCode();
      document.querySelector('#vue_id_title').innerHTML="店铺主页";
    },

  }
</script>
<style scoped>

  .shop_red i{
    color: #e51c23;
    font-weight: bold;
    font-size: 16px;
  }

  .shop_red{
    margin-left: 6%;
    color: #e51c23;
    font-size: 12px;
  }

  .shop_home_ul li p{
    width: 90%;
    margin: 0 auto;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .shop_home_ul li img{
    width: 90%;
    height: 150px;
    margin: 6px auto;
  }

  .shop_home_ul li{
    width: 50%;
    height: 210px;
    float: left;
  }

  .shop_home_body{
    overflow: hidden;
    margin-top: 10px;
  }

  .shop_name span{
    display: block;
    color: white;
    margin-bottom: 20px;
  }

  .shop_name span:last-child{
    font-size: 12px;
    width: 100%;
  }

  .shop_name{
    float: left;
    width: 68%;
  }

  .shop_home img{
    width: 80px;
    height: 80px;
    float: left;
    margin-right: 20px;
    background: white;
  }

  .shop_home{
    padding:30px 30px;
    background: #e51c23;
    height: 3.75rem;
  }

  .sreePublic>span {
    color: #bbb;
    font-size: .43rem;
    padding-right: 10px;
  }

  .index{
    background: white;
    margin-bottom: 1.6rem;
  }
</style>
